<template>
  <div>
    <Search :mess="mess" />
    <!-- 分类页面 -->
    <van-tree-select
      :items="types"
      height="93vh"
      :main-active-index="activeindex"
      @click-nav="leftfn"
    >
      <template slot="content">
        <div ref="right" class="right">
          <div v-for="(item,index) in contentsright" :key="index">
            <img :src="item.image" alt />
            <h3>{{item.text}}</h3>
          </div>
        </div>
      </template>
    </van-tree-select>

    <tab-bar />
  </div>
</template>

<script>
import TabBar from "@/components/TabBar"
import Search from "@/components/Search"
import instance from "@/api/api.js"
export default {
    name:"TypeView",
    data(){
      return {
        mess:"分类页搜索",
        activeindex:0,//左侧默认选择的字段
        rightid:"",//右侧选中的id
        types:[],//存放分类页的数据
        contentsright:[]//右侧的数据
      }
    },
    methods:{
      async getTypes(){
        let {data} = await instance.get("/type");
        this.types = data;
        this.contentsright = this.types[this.activeindex].children;
      },
      // 点击左侧导航触发的事件
      leftfn(index){
        //index是点击元素的索引
        this.activeindex = index;
        this.contentsright = this.types[index].children;
        // 获取右侧元素
        var xx = document.getElementsByClassName('van-tree-select__content')
        xx[0].scrollTop = 0;
      }
    },
    created(){
      this.getTypes();
    },
    components:{
      TabBar,
      Search
    }
}
</script>

<style lang="less" scoped>
.van-sidebar::-webkit-scrollbar {
  display: none;
}
.van-tree-select__content::-webkit-scrollbar {
  display: none;
}
.right {
  display: flex;
  justify-content: space-betweeen;
  flex-wrap: wrap;
  h3 {
    font-size: 12px;
  }
}
</style>